<template>
  <div class="">
    <basic-container>
      <SearchCondition
        ref="searchCondition"
        class="search-condition"
        :has-batch="true"
        :show-label="true"
        :condition-list="conditionList"
        @searchData="searchData"
      />
    </basic-container>
    <basic-container>
      <div class="flex-box">
        <div class="search-tips">共搜索到{{ page.total }}条数据</div>
        <el-button icon="el-icon-plus" type="primary" :size="'small'" @click="add">新增待办任务接入</el-button>
      </div>
      <YituTable
        class="tree-table"
        border
        :loading="loading"
        :table-obj="tableObj"
        :data="tableData"
        row-key="projectId"
        :current-page="page.pageIndex"
        :page-size="page.pageSize"
      >
        <template #statusStr="{ customHtmlObj: { row } }">
          <span class="have-icon" :class="row.status===1?'green-icon':'red-icon'">{{ row.statusStr }}</span>
        </template>
        <template #before-table-button="{ beforeTableButton: { row } }">
          <div style="text-align:center">
            <el-button type="text" class="common-btn c-blue" size="mini" @click="handleEdit(row)">编辑</el-button>
            <el-button v-show="row.status === 1" class="common-btn c-blue" type="text" size="mini" @click="handleStatus(row,0)">禁用</el-button>
            <el-button v-show="row.status === 0" class="common-btn c-blue" type="text" size="mini" @click="handleStatus(row,1)">启用</el-button>
          </div>
        </template>
      </YituTable>
      <pagination
        v-show="isPagination"
        ref="pagination"
        :total="page.total"
        :page="page.pageIndex"
        :limit="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        @pagination="paginationChange"
      />
    </basic-container>
  </div>
</template>

<script>
import { app, appSet, getPage, enable } from '@/api/accessManagement/todotask'
export default {
  name: 'ToDoTask',
  data() {
    return {
      conditionList: [
        { label: '接入应用集', value: 'appSetId', type: 'select', options: [], defaultValue: '' },
        { label: '所属应用', value: 'appId', type: 'select', options: [], defaultValue: '' },
        { label: '任务名称', value: 'accessName', type: 'input', defaultValue: '' },
        { label: '接入状态', value: 'status', type: 'select', options: [{ label: '启用', value: 1 }, { label: '禁用', value: 0 }], defaultValue: '' }
      ],
      tableObj: {
        tableHead: [
          { label: '接入应用集', value: 'appSetName' },
          { label: '任务名称', value: 'accessName' },
          { label: '所属应用', value: 'appName' },
          { label: '接入状态', value: 'statusStr', editType: 'custom', customName: 'statusStr' },
          { label: '接入创建人', value: 'createUser' },
          { label: '创建时间', value: 'createDate' }
        ],
        isEditTable: false,
        isSelection: false,
        isHasIndex: true,
        hasEditButton: false,
        hasDeleteButton: false,
        hasHandle: true
      },
      tableData: [],
      page: {
        total: 0,
        pageSize: 10,
        pageIndex: 1
      },
      loading: false,
      // 是否显示分页
      isPagination: true
    }
  },
  created() {
    this.init()
  },
  activated() {
    console.log(this.$route)
    if (this.$route.params.isRefresh) {
      this.getTableData()
    }
  },
  methods: {
    paginationChange(obj) {
      this.page.pageIndex = obj.page
      this.page.pageSize = obj.limit
      this.getTableData()
    },
    // 搜索
    searchData() {
      this.page.pageIndex = 1
      this.getTableData()
    },
    init() {
      // 任务标签
      appSet({}).then(res => {
        const data = res.data.data
        this.$nextTick(() => {
          this.$set(this.conditionList[0], 'options', data.map(item => ({
            label: item.appname,
            value: item.appid
          })))
        })
      })
      // 所属系统
      app({ }).then(res => {
        const data = res.data.data
        this.$nextTick(() => {
          this.$set(this.conditionList[1], 'options', data.map(item => ({
            label: item.appname,
            value: item.appid
          })))
        })
      })
    },
    add() {
      this.$router.push({
        path: `/AccessManagement/ToDoTaskSave`,
        query: {
          id: ''
        }
      })
    },
    handleEdit(row) {
      this.$router.push({
        path: `/AccessManagement/ToDoTaskSave`,
        query: {
          id: row.id
        }
      })
    },
    handleStatus(row, status) {
      const params = {
        id: row.id,
        status: status
      }
      enable(params).then((res) => {
        if (res.status === 200) {
          this.$message({
            type: 'success',
            message: status ? '启用成功!' : '禁用成功!'
          })
          this.getTableData()
        }
      })
    },
    // 排序
    sortFn() {
      this.$refs.TaskSourceManagementSort.showDlg()
    },
    getTableData() {
      const searchObj = { ...this.$refs.searchCondition.getSearchData() }
      this.loading = true
      this.tableData = []
      getPage({
        pageIndex: this.page.pageIndex,
        pageSize: this.page.pageSize,
        ...searchObj
      }).then(res => {
        if (res.status === 200) {
          this.page.total = res.data.data.total
          this.tableData = res.data.data.records
        } else {
          this.$message.error(res.msg)
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .menu-page {
    display: flex;

    .menu-title {
      font-family: PingFangSC-Semibold;
      font-size: 16px;
      color: #333333;
      line-height: 24px;
      font-weight: 600;
      padding-left: 16px;
    }
    .menu-left{
      width: 290px;
      .menu-title{
        padding-left: 0;
      }
    }
  }
  .common-btn {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    cursor: pointer;
  }
  .common-btn + .common-btn {
    margin-left: 16px;
  }
  .c-blue {
    color: #418CFF;
  }
  .c-red {
    color: #FF2F2F;
  }
  .flex-box{
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 15px;
    position: relative;
    .el-button{
      width: auto;
      margin-left: 20px;
    }
    .search-tips {
      position: absolute;
      top: 10px;
      left: 2px;
      font-size: 14px;
      color: #999999;
      line-height: 20px;
      font-weight: 400;
    }
  }
  .el-button--primary, .el-button--primary:focus, .el-button--primary:hover{
    background-color: #0368d1;
    border-color: #0368d1;
  }
  .blue-label{
    display: inline-block;
    font-size: 12px;
    color: #3271F0;
    padding: 5px 10px;
    background: #E2F1FF;
    border-radius: 2px;
  }
  .green-label{
    display: inline-block;
    font-size: 12px;
    color: #48BF30;
    padding: 5px 10px;
    background: #ECFAEA;
    border-radius: 2px;
  }
  .yellow-label{
    display: inline-block;
    font-size: 12px;
    color:  #FB9A17;
    padding: 5px 10px;
    background: #FFF4DE;
    border-radius: 2px;
  }
  .have-icon{
    padding-left: 20px;
    position: relative;
  }
  .have-icon::before{
    position: absolute;
    top: 5px;
    left: 0;
    content: ' ';
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  .red-icon::before{
    border: 2px solid #d9e8ff;
    background: #FF2F2F;
  }

  .green-icon::before{
    border: 2px solid #d8f3cd;
    background: #3ec504;
  }

</style>

